import an58 from '@mmstudio/an000058';
import { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import api from '../../atoms/api';
import { Result as R1 } from '../api/introduction/maintain/query.api';
import UploaderDlg from '../../components/uploaderdlg';
import { Message as M2, Result as R2 } from '../api/introduction/maintain/add.api';

/**
 * 文件上传
 */
export default function Show() {
	const [filepath, setfilepath] = useState('');
	useEffect(() => {
		void (async () => {
			const ret = await an58<R1>(api['/api/introduction/maintain/query'], 'get');
			setfilepath(ret.pict);
		})();
	}, []);
	return <>
		<div className='s01'>
			{filepath && <img src={filepath} />}
		</div>
		<div className='s02'>
			<UploaderDlg
				multiple={false}
				type='image'
				onChange={async (filepath) => {
					setfilepath(filepath);
					const ret = await an58<R2, M2>(api['/api/introduction/maintain/add'], 'post',
						{
							picture: filepath
						});
					if (ret.ok === true) {
						message.success('发布成功');
					} else {
						message.error('发布失败');
					}
				}}
			>
				<Button type='primary' >上传图片</Button>
			</UploaderDlg>
		</div>
		<style jsx>{`
.s01{
display: flex;
flex-direction: column;
align-items: center;
}
.s02{
display: flex;
flex-direction:row-reverse;
}
` }</style>
	</>;
}
